<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js" ></script>
</head>
<body>
    
    <div id="app">
        <!-- 
            按键修饰符: 
                - v-on:keyup.enter=''
                - v-on:keyup.delete=''
            
            https://cn.vuejs.org/v2/api/#v-on
         -->
         <form action="">
             <div>
                 用户名:
                 <input type="text" v-on:keyup.delete='deleteUname' v-model='uname'>
             </div>
             <div>
                密码:
                <input type="text" v-model='pwd' v-on:keyup.enter="handleSubmit">
            </div>
            <input type="button" v-on:click='handleSubmit' value="提交">
         </form>
        
    </div>

    <script type="text/javascript">
        
       var vm = new Vue({
           el:'#app',
           data:{
                uname:'',
                pwd:''
           },
           methods:{
                deleteUname: function(){
                    this.uname = ''
                },
                handleSubmit: function(){
                    console.log(this.uname,this.pwd)
                },
                
                

           }
       })      
       
    </script>
</body>
</html>


       